<template>
    <div class="resource-page">
     <blockquote class="breadcrumb">
      <a href="/" title="网站首页">网站首页<span class="separator">&gt;</span></a>
      <a href="/resource/">资源分享<span class="separator">&gt;</span></a>
      <span class="active">{{ currentBreadcrumb }}</span>
    </blockquote>
    <router-view />

    </div>
</template>

<script setup>
const route = useRoute()

// 根据当前路由动态生成面包屑导航的最后一个部分
const currentBreadcrumb = computed(() => {
  const path = route.path
  if (path.includes('download')) {
    return '资源下载'
  } else if (path.includes('navigation')) {
    return '网站导航'
  } else if (path.includes('tools')) {
    return '工具推荐'
  }
  return '资源下载' // 默认值
})
</script>

<style scoped>
.resource-page {
  width: 96%;
  max-width: 1200px;
  margin: 30px auto 0 auto;
  padding: 20px 0;
}
/*资源分享欲关于本站的顶部菜单样式 */
.breadcrumb {
  background-color: var(--card-bg-color, #fff);
  padding: 10px 15px;
  margin: 0 auto 20px auto;
  border-left: 4px solid #5FB878;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  font-size: 14px;
  width: auto;
  max-width: 1200px;
}

.breadcrumb a {
  color: var(--text-color, #333);
  text-decoration: none;
  margin-right: 5px;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.breadcrumb .separator {
  margin: 0 5px;
  color: var(--text-color, #aaa);
}
.breadcrumb .active {
  color: var(--text-color, #aaa);
}
</style>
